<template>
  <mu-container v-loading="loading" style="max-width: 100%!important;">

    <div class="pad10 tac w100">
      <div class="tac fs14">数据汇总</div>
      <div class="bc13 pad2">
        <div class="flrc">
          <div class="padlr5 padtb2" @click="pre">
            <mu-button small color="primary">
              <div class="flrc">
                <div class="fa fa-angle-left"></div>
                <div class="padl3">上一月</div>
              </div>

            </mu-button>
          </div>
          <div class="tac flex1">{{curMonth}}</div>
          <div class="padlr5 padtb2" @click="next">
            <mu-button small color="primary">
              <div class="flrc">
                <div class="padr3">下一月 </div>
                <div class="fa fa-angle-right"></div>
              </div>

            </mu-button>

          </div>
        </div>
      </div>
      <div class="bdrso bdtso bdlso">
        <div class="flex-r flex-start tal martb1 bdbso ">
          <div class="bdrso tac" style="width: 90px;height: 50px;line-height: 50px;">交货日期</div>
          <div class="ofe" style="width: 200px;height: 50px;line-height: 50px;">单号</div>
          <div  style="width: 120px;height: 50px;line-height: 50px;">效果图</div>
          <div class="ofe bdrso flex1" style="width: 200px;height: 50px;line-height: 50px;">工艺说明</div>
          <div style="width: 50px;height: 50px;"  class="flcc bdrso" v-for="item in points" >
            {{item.name}}
          </div>
          <div class="ofe tac" style="width: 80px;height: 50px;line-height: 50px;">发货状态</div>
        </div>

        <div class="flex-r flex-start tal martb1 bdbso " style="" v-for="row in rows">
          <div class="bdrso tac" style="width: 90px;height: 50px;line-height: 50px;">{{row.finish}}</div>
          <div class="ofe" style="width: 200px;height: 50px;line-height: 50px;cursor: pointer"  v-clipboard:copy="row.order.sn" v-clipboard:success="onCopy">{{row.order.sn}}</div>
          <div  style="width: 120px;height: 50px;">
            <img  @click="()=>{picView = $api.getUrl() + row.order.cover;openDialog = true}"
                  :src="$api.getUrl() + row.order.cover" style="max-width: 100px;max-height: 50px;width: 100px;" :alt="row.order.info"/>
          </div>
          <div class="ofe bdrso flex1" style="width: 200px;height: 50px;line-height: 50px;">{{row.order.info}}</div>
          <div style="width: 50px;height: 50px;"  class="flcc bdrso" v-for="item in row.points" :style="{background:$com.isbool(item.delay)?item.delay.background:'',color:$com.isbool(item.delay)?item.delay.color:''}">
            {{item.date}}
          </div>
          <div class="ofe tac" style="width: 80px;height: 50px;line-height: 50px;"
               :style="{background:$com.isbool(row.order.deliverStatus)?row.order.deliverStatus.background:'',color:$com.isbool(row.order.deliverStatus)?row.order.deliverStatus.color:''}"
          >{{$com.isbool(row.order.deliverStatus)?row.order.deliverStatus.name:''}}</div>
        </div>
      </div>
    </div>

    <!--    隐藏项目-->
    <mu-dialog title="预览" :open.sync="openDialog" scrollable>
      <img :src="picView" alt="" class="w100">
      <mu-button slot="actions" flat color="primary" @click="openDialog = false">关闭</mu-button>
    </mu-dialog>
  </mu-container>
</template>

<script>
import Layout from './layout'
import tree from '@/components/FormItem/tree'
import echarts from 'echarts'
import chart from "../../assets/js/chart";
import com from "../../assets/js/com";

export default {
  name: 'welcome',
  components:{tree},
  data () {
    return {
      loading: true,
      docked: true,
      open: true,
      position: 'left',
      rows:[],
      points:[],
      curMonth:'',
      curPage:0,
      //图片查看
      openDialog: false,
      picView: ''
    }
  },
  comments: { Layout },
  methods: {
    getList(){
      this.$api.get('/admin/StreamOrder/sum',{page:this.curPage},(res)=>{
        console.log(res.d)
        this.rows = res.d.list
        this.points = res.d.points
        this.curMonth = res.d.curMonth
        this.loading = false
      })
    },
    pre(){
      this.loading = true
      this.curPage--
      this.getList()
    },
    next(){
      this.loading = true
      this.curPage++
      this.getList()
      com.showToast('加载中')
    },
    onCopy(sn){
      com.showToast("单号已复制")
    }
  },
  created () {
    this.$progress.start()
  },
  mounted () {
    this.$progress.done()
    this.getList()
  }
}




</script>

<style scoped>

</style>
